import {Input, ElementRef, Renderer, Directive, HostListener} from "@angular/core";

export class RippleDirective {
    private el: HTMLElement

    @Input('mdl-ripple')
    private rippleActive: boolean|string = true

    constructor(private elementRef: ElementRef,
                protected renderer: Renderer) {
        this.el = elementRef.nativeElement
    }

    @HostListener('mouseenter')
    onMouseEnter() {
        this.highlight(this.rippleActive ? 'cyan' : null)
    }

    @HostListener('mouseleave')
    onMouseLeave() {
        this.highlight(null)
    }

    private highlight(color: string) {
        this.el.style.backgroundColor = color
    }
}

@Directive({
    selector: 'a[mdl-ripple]'
})
export class AnchorRippleDirective extends RippleDirective {
    constructor(elementRef: ElementRef, renderer: Renderer) {
        super(elementRef, renderer)
    }
}